<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="商户通道信息"
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <div class="content">
      <div class="top">
        <div class="header">
          <div class="img" />
          <div class="title">商户收单基础信息</div>
        </div>
        <div class="contentList" style="margin-top: 20px;">
          <a-row justify="space-between" type="flex">
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="商户号">
                  {{ vdata.detailData['mchNo'] ? vdata.detailData['mchNo'] : '--' }}
                  <img v-if="vdata.detailData['mchNo']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="商户地址">
                  {{ vdata.detailData['address']? vdata.detailData['address']:'--' }}
                  <img v-if="vdata.detailData['address']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="商户名称">
                  {{ vdata.detailData['mchName'] ? vdata.detailData['mchName'] :'--' }}
                  <img v-if="vdata.detailData['mchName']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <!-- <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="商户归属">
                  {{ vdata.detailData['parentAgentName'].slice(1).join('/') }}
                  <img style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col> -->
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="商户简称">
                  {{ vdata.detailData['mchShortName'] ? vdata.detailData['mchShortName'] :'--' }}
                  <img v-if="vdata.detailData['mchShortName']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="收单通道">
                  {{ vdata.detailData['ifName']?vdata.detailData['ifName']:'--' }}
                  <img v-if="vdata.detailData['ifName']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <!-- <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="三方商户号">
                  {{ vdata.detailData['mchNo'] }}
                  <img style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col> -->
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="微信间联商户号">
                  {{ vdata.detailData['wechatSubmerchantNo'] ?vdata.detailData['wechatSubmerchantNo']:'--' }}
                  <img v-if="vdata.detailData['wechatSubmerchantNo']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="支付宝间联商户号">
                  {{ vdata.detailData['aliSubmerchantNo'] ?vdata.detailData['aliSubmerchantNo']:'--' }}
                  <img v-if="vdata.detailData['aliSubmerchantNo']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :sm="12">
              <a-descriptions>
                <a-descriptions-item label="云闪付间联商户号">
                  {{ vdata.detailData['ysfSubmerchantNo'] ?vdata.detailData['ysfSubmerchantNo']:'--' }}
                  <img v-if="vdata.detailData['ysfSubmerchantNo']" style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="bottom">
        <div class="header">
          <div class="img" />
          <div class="title">商户其余通道信息</div>
        </div>
        <div v-if="vdata.detailDataOther.length>0">
          <div v-for="(item,index) in vdata.detailDataOther" :key="index" class="contentList" style="margin-top: 20px;">
            <a-row justify="space-between" type="flex">
              <a-col :sm="12">
                <a-descriptions>
                  <a-descriptions-item label="收单通道">
                    {{ item.ifName }}
                    <img style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>
              <a-col :sm="12">
                <a-descriptions>
                  <a-descriptions-item label="支付宝间联商户号">
                    {{ item?.aliSubmerchantNo }}
                    <img style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>
              <a-col :sm="12">
                <a-descriptions>
                  <a-descriptions-item label="微信间联商户号">
                    {{ item.wechatSubmerchantNo }}
                    <img style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>
              <a-col :sm="12">
                <a-descriptions>
                  <a-descriptions-item label="云闪付间联商户号">
                    {{ item.ysfSubmerchantNo }}
                    <img style="width: 12px;height: 12px;margin-left: 4px;" src="https://jdyd-test.oss-cn-hangzhou.aliyuncs.com/henan/activity/9fdddea4-2d43-4655-b379-19770960f61b.png" alt="">
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </div>
    
    <div class="drawer-btn-center">
      <a-button type="primary" :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="()=>{vdata.visible = false}">
        <close-outlined />
        关闭
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import{$getMchList,$apiMchInfoDetail,$apiMchChannelList}from  '@/api/mch/index'
  import {defineProps,reactive} from 'vue'
    const props = defineProps({
      callbackFunc: { type: Function,default:null }
  })

    const vdata = reactive({
        btnLoading: false,
        detailData: {}, // 收单通道信息
        detailDataOther:[],//其余通道信息
        recordId: null, // 更新对象ID
        visible: false, // 是否显示弹层/抽屉
        isvList: [], // 服务商下拉列表
        isvName: '' // 服务商名称
    })
    async function show (mchNo) { // 弹层打开事件
      await $apiMchChannelList({mchNo:mchNo}).then(res=>{
                const records = res.records || []
                const mainChannel = records.filter(item=>item.state ==1)
                const otherChannel = records.filter(item=>item.state ==0)
                console.log(mainChannel,otherChannel,888888)
                vdata.detailData = mainChannel[0] ? mainChannel[0] : {}
                vdata.detailDataOther = otherChannel ? otherChannel : []
                vdata.visible = true
              })
        
      }
      function onClose () {
        vdata.visible = false
      }
defineExpose({
  show //抛出show函数给父组件
})
</script>
<style scoped lang="less">
  .content{
    width: 100%;
    height: 100%;
    .top{
      width: 100%;
      // height: 100%;
      .header{
        width: 100%;
        height: 40px;
        background: #FAFAFA;
        border-radius: 4px 4px 0px 0px;
        display: flex;
        align-items: center;
        .img{
          width: 2px;
          height: 14px;
          background: #0671EB;
          border-radius: 0px 0px 0px 0px;
          margin-left: 10px;
          margin-right: 8px;
          
        }
      }
    }

    .bottom{
      width: 100%;
      height: 250px;
      .header{
        width: 100%;
        height: 40px;
        background: #FAFAFA;
        border-radius: 4px 4px 0px 0px;
        display: flex;
        align-items: center;
        .img{
          width: 2px;
          height: 14px;
          background: #0671EB;
          border-radius: 0px 0px 0px 0px;
          margin-left: 10px;
          margin-right: 8px;
          
        }
      }
    }
  }
</style>
